<template>
	<div class="h_detail">
		<div class="broadcast">
			<div @click="back()" class="back">
				<img src="../../assets/image/back.png" alt="">
			</div>
			<!-- <div class="share">
				 <img src="../../assets/image/share.png" alt="">
			</div> -->
			<mt-swipe :auto="4000" :showIndicators="false" @change="handleChange">
				<mt-swipe-item v-for="item in hotelinfo.img"><img :src="item" alt=""></mt-swipe-item>
			</mt-swipe>
			<div class="index-box">
				{{ imgIndex }}/{{ totalIndex }}
			</div>
		</div>
			
		<div class="map_bg">
			<div class="absolute_wrap">
				<div class="absolute_wrap_top">
					<div class="img"><img :src="src" alt=""></div>
					<p>{{hotelinfo.name}}</p>
					<span>{{hotelinfo.star_level}}</span>
				</div>
			
			</div>
			

		</div>
		<div class="map_address" @click="map">
			<div class="l-left">
				<i></i>
				<span>{{hotelinfo.province}}{{hotelinfo.city}}{{hotelinfo.area}}{{hotelinfo.address}}</span>
			</div>
			<div class="l-right"></div>
		</div>	
		<a class="absolute_wrap_bottom" :href="'tel:'+hotelinfo.phone">
			<div>
					<i></i>
				<span style="margin-left: -5px;">酒店电话:</span>
				<span class="phonenum">{{hotelinfo.phone}}</span>
			</div>
			
					<div class="img-phone">
					<img src="../../assets/image/img-phone.png" alt="">
				</div>
			</a>
<!-- 			
  	 <div class="order_text order_text2">
  	    <i></i>
  	 	<span>酒店概况</span>
  	 	<i></i>
  	 </div> -->
  	 <!-- 锚点导航 -->
  	 <div class="tabbar">   
       <div :class="[{'tabspan': 0==index}]"  @click="goAnchor(0,'#anchor-hotel_intr')">酒店介绍</div>
       <div :class="[{'tabspan': 1==index}]"  @click="goAnchor(1,'#anchor-facilities_services')">设施服务</div>
       <div :class="[{'tabspan': 2==index}]"  @click="goAnchor(2,'#anchor-traffic_information')">交通信息</div>   
  	 </div>
	  
  	 <div class="hotel_img" id='anchor-hotel_intr' v-html='hotelinfo.info'>
 	 	    <div>{{hotelinfo.info}}</div>
  	 </div>
  	 <!-- 设施服务 -->
  	 <div class="services" id='anchor-facilities_services'>
		<div class="services_title" style="font-weight: 700;">
  	   		酒店服务	 
  	   </div>
		<div class="content">
			<router-link :to="{path: '/servicedetail',query: {'id': item.id}}"  class="c-item" v-for="(item,index) in service_list" :key="index"><span><img src="../../assets/image/sun.png" alt=""><a href="javascript:;">{{item.name}}</a><div v-if="item.label" class="logo">{{item.label}}</div></span><span><i class="iconfont">&#xe871;</i></span></router-link>
		
		</div>
  	   <div class="services_title" style="font-weight: 700;">
  	   	基础设施
  	   </div>
       <div v-for="item in hotelinfo.service">
    	   <div class="public_services">
    	    {{item.name}}
    	   </div>
    	   <div class="services_item">
    	   	 <span v-for="items in item.class">{{items}}</span>	   	 
    	   </div> 
       </div>	     	   
  	 </div>
  	 <!-- 交通信息 -->
   	 <div class="services traficservice" id="anchor-traffic_information">
  	   <div class="services_title" style="font-weight: 700;">
  	   	交通信息
  	   </div>
       <div class="trafic" v-for="item in hotelinfo.traffic">{{item.name}}  <i>{{item.distance}}</i></div>	     	   
  	 </div> 
  
	</div>	
</template>
<script>
import axios from 'axios';
import {Toast } from 'mint-ui';
import Wx from 'weixin-js-sdk';
import { Swipe, SwipeItem } from 'mint-ui';
import '../../assets/javascript/animation.js'
import '../../assets/javascript/tween.js'
export default{
	
	data(){
		return {
			index: 0,
 			tabbar:[true,false,false],//导航
			hotelinfo:'',
			totalIndex: 0,
			imgIndex: 1,
			src: '',
			service_list: ''
		}
	},
	components:{
		'mt-swipe': Swipe,
		'mt-swipe-item':SwipeItem
	},
	created(){
		var vm = this;
	    let url = window.location.href;
	    vm.wxShare(url); 
		var that =  this;
		var hotel_code = that.$route.query.hotel_code
		axios.post("/Weixin/Hotel/hotelDetail",{hotel_code:hotel_code}).then((res)=>{
			if(res.data.code == "1"){
	          	var lat = res.data.data.lat
	          	var long = res.data.data.long
	          	var hotelinfo = res.data.data
	          	that.lat = lat;
	          	that.long = long;
				that.hotelinfo = hotelinfo;
				that.src = res.data.data.logo;
				this.totalIndex = that.hotelinfo.img.length;
				that.service_list = res.data.data.service_list;
			}
		})
	},
	methods:{
		back(){
			this.$router.go(-1)
		},
		handleChange(imgIndex) {
			this.imgIndex = imgIndex + 1;
		},
		//模拟锚点
		goAnchor(index,selector) {
			this.index = index;
			let anchor = this.$el.querySelector(selector);
			//document.documentElement.scrollTop = anchor.offsetTop;
			let total = anchor.offsetTop;
			// 平滑滚动，时长500ms，每10ms一跳，共50跳
			// 获取当前滚动条与窗体顶部的距离
			let distance = document.documentElement.scrollTop || document.body.scrollTop
			// 计算每一小段的距离
			let step = total/30;
			(function smoothDown () {
				if (distance < total) {
					distance += step
				　　// 移动一小段
					document.body.scrollTop = distance
					document.documentElement.scrollTop = distance
				　　// 设定每一次跳动的时间间隔为10ms
					setTimeout(smoothDown, 10)
				} else {
				　　// 限制滚动停止时的距离
					document.body.scrollTop = total
					document.documentElement.scrollTop = total
				}
			})()
		},
	      map(){
	      	var that = this;
	      	// console.log(Number(that.lat),Number(that.long),that.hotelinfo.name,that.hotelinfo.address)
	        Wx.getLocation({
	          type :'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
	          success : function(res) {
	            //使用微信内置地图查看位置接口
	            console.log("成功")
	            Wx.openLocation({
	              latitude : Number(that.lat), // 纬度，浮点数，范围为90 ~ -90
	              longitude : Number(that.long),// 经度，浮点数，范围为180 ~ -180。
	              name : that.hotelinfo.name, // 位置名
	              address :that.hotelinfo.address, // 地址详情说明
	              scale : 18, // 地图缩放级别,整形值,范围从1~28。默认为最大
	              infoUrl : '' // 在查看位置界面底部显示的超链接,可点击跳转（测试好像不可用）
	            });
	          },
	          cancel:function(res) {
	            
	          },
	          fail(res){
	            console.log(res,"错误提示")

	          }
	        })          
	      }		
	}
}
</script>
<style>
/*img{
  width:100%;
  height:100%;
}*/
.absolute_wrap_top .img img{
	border-radius:50%;
}
.mint-swipe-items-wrap img {
  max-height:100%;
  width:100%;

}
#anchor-hotel_intr{
  word-wrap:break-word;
}
#anchor-hotel_intr  img{
 width:100%;
}
</style>
